<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-button type="primary" size="mini" class="el-icon-plus" @click="openDialog">添加</el-button>
      </div>
      <el-table :data="trandmarkList" v-loading="loading" border style="width: 100%; margin-bottom: 20px;">
        <el-table-column prop="date" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="tmName" label="品牌名称">
        </el-table-column>
        <el-table-column prop="province" label="品牌logo">
          <template slot-scope="scope">
            <img :src="scope.row.logoUrl" alt="" style="width: 120px">
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="openDialog(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small" @click="delTm(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="changeSize" @current-change="changePage" :current-page="pageInfo.page"
        :page-sizes="[3, 5, 8]" :page-size="pageInfo.pageSize" layout="prev, pager, next, jumper, ->, sizes, total"
        :total="pageInfo.total">
      </el-pagination>
    </el-card>

    <el-dialog title="编辑品牌" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form label-width="80px" :model="tmInfo" label-position="left">
          <el-form-item label="品牌名称" prop="tmName" :rules="{
            required: true, message: '品牌名不能为空', trigger: 'blur'
          }">
            <el-input v-model="tmInfo.tmName"></el-input>
          </el-form-item>
          <el-form-item label="品牌logo">
            <el-upload class="avatar-uploader" :action="`/dev-api/admin/product/fileUpload`" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="tmInfo.logoURL" :src="tmInfo.logoURL" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="editTm">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import reqTm from '@/api/trandmark'
// import mock from '@/utils/mockRequest'

// const BASE_URL = import.meta.env.VITE_API_URL;
const BASE_URL = '/dev-api';

export default {
  name: '',
  data() {
    return {
      trandmarkList: [],
      loading: false,
      pageInfo: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      dialogVisible: false,
      // 编辑某个品牌信息时所收集的数据
      tmInfo: {
        id: '',
        tmName: '',
        logoURL: ''
      }
    }
  },
  methods: {
    // 获取品牌分类列表
    async getTrandmarkList() {
      this.loading = true
      let res = await reqTm.reqTrandmarkList(this.pageInfo.page, this.pageInfo.pageSize)
      this.trandmarkList = res.records
      this.pageInfo.total = res.total,
        this.loading = false
    },
    // 页码或者每页显示数量变化
    changeSize(val) {
      this.pageInfo.pageSize = val
      this.getTrandmarkList()
    },
    changePage(val) {
      this.pageInfo.page = val
      this.getTrandmarkList()
    },
    // 添加或编辑品牌
    openDialog(tmInfo) {
      this.tmInfo.id = ''
      this.tmInfo.tmName = ''
      this.tmInfo.logoURL = ''
      this.dialogVisible = true
      const { id, tmName, logoUrl } = tmInfo
      if (tmName) {
        this.tmInfo.id = id
        this.tmInfo.tmName = tmName
        this.tmInfo.logoURL = logoUrl
      }
    },
    async editTm() {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {});
      const { tmName, logoURL } = this.tmInfo
      // 稍微校验一下表单
      if (tmName && logoURL) {
        try {
          await reqTm.reqEditTrandmark(this.tmInfo)
          this.dialogVisible = false
          // 回到第一页重新请求数据
          this.pageInfo.page = 1
          this.getTrandmarkList()
        } catch (error) {
          console.log(error);
        }
      } else {
        this.$alert('提示', '请确保填入了正确的内容！', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    },
    // 上传图片的函数
    handleAvatarSuccess(res, file) {
      this.tmInfo.logoURL = file.response.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 删除品牌失败
    async delTm (id){
      try {
        await reqTm.reqDelTrandmark(id)
        if (this.trandmarkList.length === 1) {
          this.pageInfo.page -= 1
        }
        this.getTrandmarkList()
      } catch (error) {
        
      }
    }
  },
  computed: {
    // BASE_URL() {return import.meta.env.VITE_API_URL}
  },
  mounted() {
    this.getTrandmarkList()
    // console.log(meta.env);
    // mock.post('/admin/acl/index/login', {
    //   password: "111111",
    //   username: "admin"
    // })
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  float: left;

  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

